{<template>
	<view class="drive-conten">
		<block v-if="driveList.length > 0">
			<view class="drive-list" v-for="(item,index) in driveList" :key="item.userId" @click="changeIndex = index">
				<view :class="changeIndex == index?'change-drive-btn':'change-drive'"></view>
				<view class="drive-info">
					<!-- 头像 -->
					<view class="drive-headportrait">
						<image :src="item.avatar ? item.avatar : 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/default_avatar.png'" mode="aspectFill"></image>
					</view>
					<!-- 资料 -->
					<view class="drive-info-conten">
						<view class="drive-info-name">
							{{item.nickname}}
						</view>
						<view class="drive-info-phone">
							{{item.phone}}
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="no-list">
				<view class="no-data-image">
					<image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/no_data_data.png" mode="widthFix"></image>
				</view>
				<view class="no-data-title">
					暂无数据
				</view>
			</view>
		</block>
		<!-- 确认 / 取消-->
		<view class="btn">
			<view class="btn-conten">
				<view class="close-btn" :style="{'margin-right': driveListFlag ? '28rpx' : '0rpx'}" @click="closeFn">
					取消
				</view>
				<view class="sucess-btn" v-if="driveList.length > 0" @click="sucessFn">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { publishDriver } from '@/common/api/car.js'
	import { mapMutations } from 'vuex'
	export default{
		data(){
			return{
				personData:null,
				driveList:[],
				changeIndex:0,
				driveListFlag:false
			}
		},
		onLoad(options) {
			if(options.personData) this.personData = JSON.parse(options.personData)
			if(this.personData) this.publishDriverFn(this.personData)
		},
		methods:{
			async sucessFn(){
				console.log(this.driveList[this.changeIndex])
				await this.setDistributionDrive(this.driveList[this.changeIndex])
				this.jump()
			},
			closeFn(){
				this.jump()
			},
			async publishDriverFn(item){
				uni.showLoading({
					title: '加载中',
				 })
				let startDate = item.startDate+':00'
				let endDate = item.nextDate+':00'
				let query = {
				  startDate: startDate,
				  nextDate: endDate,
				  passengers: item.passengers,
			      openCarpool:1
				}
				let [err,res] = await publishDriver(query)
				console.log(res)
				if(res){
					uni.hideLoading();
					let resData = []
					for(let value of res.data.data){
						if(!value.cannotLabels || value.cannotLabels.length == 0){
							resData.push(value)
						}
					}
					this.driveList = resData
					if(this.driveList.length > 0) this.driveListFlag = true
					console.log(this.driveList)
				}else{
					uni.hideLoading();
				}
			},
			...mapMutations({
				setDistributionDrive: 'order/setDistributionDrive'
			})
		},
	}
</script>

<style lang="scss" scoped>
	.drive-conten { 
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3FF;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 200rpx;
		overflow-y: scroll;
		position: relative;
		.drive-list {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background-color: #FFFFFFFF;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.change-drive{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				border: 2rpx solid #979797FF;
				margin-right: 50rpx;
			}
			.change-drive-btn{
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				margin-right: 50rpx;
				background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
				position: relative;
			}
			.change-drive-btn::before{
				content: '';
				display: inline-block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 100%;
				height: 15rpx;
				width: 15rpx;
				background-color: #FFFFFFFF;
			}
			.drive-info{
				display: flex;
				align-items: center;
				.drive-headportrait{
					width: 104rpx;
					height: 104rpx;
					overflow: hidden;
					border-radius: 100%;
					margin-right: 30rpx;
					& > image {
						width: 100%;
						height: 100%;
					}
				}
				.drive-info-conten{
					display: flex;
					justify-content: center;
					flex-direction: column;
					
					.drive-info-name{
						font-size: 32rpx;
						font-weight: 600;
						color: #000000FF;
					}
					.drive-info-phone{
						margin-top: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #00000099;
						line-height: 24rpx !important;
					}
				}
			}
		}
		.no-list {
			width: 100vw;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50% , calc(-50% - 200rpx));
			.no-data-image{
				width: 492rpx;
				height: 410rpx;
				& > image {
					width: 100%;
					height: 100%;
				}
			}
			.no-data-title {
				margin-top: 30rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #00000066;
			}
		}
		.btn {
			width: 100vw;
			padding: 22rpx 30rpx 90rpx;
			box-sizing: border-box;
			background-color: #FFFFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			.btn-conten {
				flex: 1;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				.close-btn {
					flex: 1;
					padding: 32rpx 0;
					background-color: #EEEEEEFF;
					border-radius: 12rpx;
					color: #00000066;
					line-height: 32rpx;
				}
				.sucess-btn {
					flex: 1;
					padding: 32rpx 0;
					background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
					border-radius: 12rpx;
					color: #865825FF;
					line-height: 32rpx;
				}
			}
		}
	}
</style>